<template> 
 <el-dialog
    :model-value="visible"
    :title="title"
    width="500"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
  <el-form :model="form" label-width="auto">
    <el-form-item label="项目编码">
        <el-input v-model="form.itemCode" disabled placeholder="请输入" />
    </el-form-item>
    <el-form-item label="项目名称">
        <el-input v-model.trim="form.itemName" :maxlength="30" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="项目说明">
        <el-input v-model.trim="form.itemRemark" :maxlength="50" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="在用标记">
        <el-radio-group v-model="form.itemFlag">
            <el-radio :value="0">停用</el-radio>
            <el-radio :value="1">在用</el-radio>
        </el-radio-group>
    </el-form-item>   
  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {watch, ref} from 'vue'
import { ElMessage } from 'element-plus'
import { apiCostItemsCode, apiAddCostItems } from '@/api/cost'

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  entry: String,
  data: {
    type: Object,
    default: () => {}
  }
})
let emit = defineEmits(['close', 'confirm'])

let form = ref({
  itemCode: '',
  itemName: '',
  itemRemark: '',
  itemFlag: 1
})
let title = ref('')

watch(() => props.visible, (newV) => {

  if(newV) {
    if(props.entry === 'edit') {
      title.value = '修改成本项目'
      form.value ={
        ...props.data,
        zyFlag: undefined,
        itemFlag: Number(props.data.itemFlag)
      }
    } else {
      title.value = '新增成本项目'
      form.value = {
        itemCode: '',
        itemName: '',
        itemRemark: '',
        itemFlag: 1
      }
      getCode()
    }
       
  }
})

// 获取项目编码
const getCode = async() => {
  const res = await apiCostItemsCode()
  form.value.itemCode = res
}

// 取消
const handleClose = () => {

  emit('close')
}
// 确定
const handleConfirm = async () => {

  const res = await apiAddCostItems({
    ...form.value
  })
  if(res) {
    ElMessage.success('操作成功')
        
    emit('confirm')
  }
}
</script>

<style lang="scss" scoped>

</style>